<template>
  <ul class="list">
      <li class="item" v-for="(item,key) of cities"
      :key="key"
      @click="handleLetterClick"
      >{{key}}
      </li>
  </ul>
</template>

<script>

export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('letter', e.target.innerText)
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .list
        display : flex
        flex-direction : column
        justify-content : center
        position : absolute
        top: 1.4rem
        right: 0
        bottom: 0
        width: .4rem
        .item
            line-height : .44rem
            text-align : center
            color: $bgColor
</style>
